<template>
    <div class="order">
         <div class="head">
            <van-nav-bar
            title="订单"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
            <div class="address" @click="choose">
                <div class="details">                  
                   <div class="user">
                       <p>{{this.address.name}}</p>
                       <div v-if="this.address.is_default==1">默认</div>
                   </div>
                   <div class="info">
                       <p>{{this.address.mobile}}</p>
                       <p>{{this.address.address}} {{this.address.address_detail}}</p>
                   </div>
                   <div class="arrow"></div>
                </div>
            </div>
            <div class="orderbox">
                <div class="item">
                    <div>商品合计</div>
                    <div>￥ {{this.allPrice}} 元</div>
                </div>
                <div class="item">
                    <div>运费</div>
                    <div>免运费</div>
                </div>
                <div class="item">
                    <div>优惠券</div>
                    <div>暂无</div>
                </div>
            </div>
            <div class="carlist">
                <div class="item" v-for="item in goodslist" :key="item.id">
                    <van-card
                    :price="item.retail_price"
                    :title="item.goods_name"
                    class="goods-card"
                    :thumb="item.list_pic_url"
                    /> 
                    <span class="num"> x {{item.number}}</span>
                </div>
            </div>
        </div>
        <div class="btm">
            <div class="left">实付 ￥{{this.allPrice}}</div>
            <div class="right">支付</div>
        </div>


    </div>
</template>

<script>
import {detailAction} from  '@/api/order'
import {AdetailAction} from  '@/api/address'
import {mapState} from  'vuex'
    export default {
        data() {
            return {
                goodslist:[],
                allPrice:0,
                address:{}
            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            },
            choose(){
                this.$router.push({
                    path:'/addressSelect'
                })
            }
        },
        mounted(){
            this.$router.afterEach((to, from, next) => {
                window.scrollTo(0, 0)
            })
        },
        created(){
            detailAction({
                openId:localStorage.getItem('openId')
            }).then(res=>{
                console.log(res);
               
                this.allPrice=res.allPrise;
                this.goodslist=res.goodsList;
                if(this.selectAddressId){
                    AdetailAction({
                        id:this.selectAddressId
                    })
                    .then(res=>{
                        this.address=res.data;
                    })
                }else{
                     this.address=res.address;
                }
            });

        },
        computed:{
            ...mapState(['selectAddressId'])
        },

    }
</script>

<style lang="scss" scoped>
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    background-color: #eee;
}

.address{
    padding: 15px 0;
    margin-bottom: 10px;
    background: url('./../../assets/images/address-bg-bd.png') repeat-x 0 0;
    background-color: #fff;

    .details{
        padding: 0 10px;
        height: 66px;

        display: flex;
        justify-content: center;
        align-items: center;

        .user{
            width: 50px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            align-self: flex-start;
            
            div{
                width: 30px;
                height: 15px;
                border: 1Px solid #b4282d;
                text-align: center;
                line-height: 15px;
                color: #b4282d;
                margin: 1px auto 0 auto;
            }
           
        }
        .info {
            padding: 0 10px;
            flex: 1;
            text-align: left;
            p{
                text-indent: 2em;
            }
           
        }

        .arrow {
            width: 25px;
            height: 25px;
            margin: 0 10px;
            background: url('../../assets/images/go.png') no-repeat center;
            background-size: 50% 50%;
        }
    }

}

.orderbox{
    padding: 0 15px;
    background-color: #fff;

    .item{
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1Px solid #d9d9d9;
    }
}

.carlist{
    background: #fff;
    margin-bottom: 55px;
    margin-top: 10px;

    .item{
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 0;
        border-bottom: 1Px solid #2222;



        .goods-card {
            height: 100px;
            padding: 0;
            margin: 0;
            background-color: #fff;

            .van-card__title{
                margin: 20px 0;
            }
            .van-card__bottom{
                text-align: left;
            }
            .van-card__price{
                margin-bottom: 20px;
            
            }
        }

        .num{
            position: absolute;
            top:50%;
            right: 30px;
            font-size: 15px;
            transform: translateY(-50%);
        }
    }
}

.btm{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    
    div{
        padding: 0 10px;
    }
    div:nth-child(2){
        width: 100px;
        height: 100%;
        background-color: #b4282d;
        color: #ffffff;
        text-align: center;
        font-size: 16px;
        line-height: 50px;
    }
}


</style>